<template>
  <div id="map" class="traffic-map">
    <div class="project-title">交通状况监测系统</div>
    <div class="gl-ctrl-bottom-left">
      <div class="gl-ctrl-right-top">
        <img :src="ctrlBtnSrc" class="pitch-ctrl-img ctrl-img" @click="changeCtrlImg()" title="地图二维三维切换">
        <img :src="trafficBtnSrc" class="traffic-ctrl-img ctrl-img" @click="changTrafficImg()" title="路况">
      </div>
    </div>
    <diagram v-on:hide-diagram="hideDiagram()" v-if="diagramOpen"></diagram>
    <div class="circle-bk" @click="openDiagram()">简</div>
    <img class="togglemapfullstatus" :src='nav_hiddenorneot_img' @click="togglemapfullstatus()"/>
    <div class="flex-container">
      <div :class="darkClass" @click="toggleMapType('dark')">深色</div>
      <div :class="lightClass" @click="toggleMapType('light')">清新</div>
    </div>
  </div>
</template>
<script>
  import * as globals from '../global'
  import env from '../global/env'
  import Diagram from './Diagram'
  import * as configs from '../config'
  import {mapGetters} from 'vuex'
  export default{
    name: 'TrafficMap',
    data () {
      return {
        usr: 1,
        login: false,
        map: null,
        ctrl_btn_2d_status: true,
        refresh_interval: null,
        traffic_status: true,
        diagramOpen: false,
        mapfullstatus: false
      }
    },
    components: {
      Diagram
    },
    created () {
      console.log("created");
    },
    mounted () {

      minemap.accessToken = globals.MAP_ACCESS_TOKEN;
      minemap.solution = globals.MAP_SOLUTION;

      this.map = new minemap.Map({
        container: 'map',
        style: globals.URL_SERVICE_ROOT + globals.URL_STYLE_RES_ROOT + this.styleId,
        center: [109.899842, 40.635018],
        zoom: 11,
        pitch: 0,
        maxZoom: 17,
        dragRotate: false
      });
      env.map = this.map
      env.map.addControl(new minemap.Navigation(),"bottom-right");

      env.map.on("moveend", () => {
        if (env.map.getPitch() > 0) {
          this.ctrl_btn_2d_status = false;
        } else {
          this.ctrl_btn_2d_status = true;
          env.map.dragRotate.disable();
          if(env.map.getBearing() !=0){
            env.map.setBearing(0);
          }
        }
      })

      /*
       添加traffic
       */
      env.map.on("load", ()=> {
        this.addTraffic();
      });

      this.startRefreshTraffic();
    },
    updated(){
      if (this.mapfullstatus != this.mapbodyfullstatus) {
        env.map.resize();
        this.mapfullstatus = this.mapbodyfullstatus;
      }
    },
    destroyed () {
      env.map.remove();
      clearInterval(this.refresh_interval);
    },
    computed: {
      ...mapGetters({
        mapType: 'mapType',
        mapbodyfullstatus: 'mapbodyfullstatus',
      }),
      nav_hiddenorneot_img(){
        return this.mapbodyfullstatus ? 'static/img/mapfull.png' : 'static/img/mapnotfull.png'
      },
      ctrlBtnSrc(){
        return this.ctrl_btn_2d_status ? 'static/img/map/2d.png' : 'static/img/map/3d.png';
      },
      trafficBtnSrc(){
        return this.traffic_status ? 'static/img/map/traffic_on.png' : 'static/img/map/traffic_off.png'
      },
      styleId(){
        if (this.mapType === globals.MAP_TYPE_DARK) {
          return configs.styleIdDark;
        } else if (this.mapType === globals.MAP_TYPE_LIGHT) {
          return configs.styleIdLight;
        }
      },
      layerBefore(){
        if (this.mapType === globals.MAP_TYPE_DARK) {
          return configs.layerBeforeDark;
        } else if (this.mapType === globals.MAP_TYPE_LIGHT) {
          return configs.layerBeforeLight;
        }
      },
      darkClass (){
        return {
          'flex-item': true,
          'flex-select': this.mapType === globals.MAP_TYPE_DARK
        }
      },
      lightClass (){
        return {
          'flex-item': true,
          'flex-select': this.mapType === globals.MAP_TYPE_LIGHT
        }
      }
    },
    methods: {
      addTraffic(){
        env.map.addSource("traffic", {
          "type": "vector",
          "tiles": [globals.URL_BAOTOU_TRAFFIC_ROOT + '/' + this.getTrafficDateMark()]
        });
//        var color = ["", "#00ff00", "#ffff00", "#ff0000"];
        var color = env.trafficStatusColor;

        for (var i = 1; i < 4; i++) {
          this.addTrafficLayer(i, "traffic" + i, color[i], null);
        }
      },
      /**
       * 定时刷新路况
       */
      startRefreshTraffic(){

        if (!this.refresh_interval) {
          this.refresh_interval = setInterval(()=> {
            if (this.traffic_status) {
              env.map.removeSource("traffic");
              env.map.addSource("traffic", {
                "type": "vector",
                "tiles": [globals.URL_BAOTOU_TRAFFIC_ROOT + '/' + this.getTrafficDateMark()]
              });
            }
          }, 1000 * 60 * 1);
        }
      },
      openDiagram(){
        this.diagramOpen = true;
      },
      hideDiagram(){
        this.diagramOpen = false;
      },
      addTrafficLayer (status, name, color, callback) {
        env.map.addLayer({
          "id": name,
          "type": "line",
          "source": "traffic",
          "source-layer": "Traffic",
          "minzoom": 7,
          "maxzoom": 18,
          "layout": {
            "line-join": "round",
            "line-cap": "round"
          },
          "paint": {
            "line-color": color,
            "line-width": 2
          },
          filter: ["==", "status", status]
        }, this.layerBefore);
      },
      changeCtrlImg(){
        this.ctrl_btn_2d_status = !this.ctrl_btn_2d_status;
        if (this.ctrl_btn_2d_status) {
          env.map.setPitch(0);
          env.map.dragRotate.disable();
          env.map.setBearing(0);
        } else {
          env.map.setPitch(60);
          env.map.dragRotate.enable();
        }
      },
      changTrafficImg(){
        this.traffic_status = !this.traffic_status;
        if (this.traffic_status) {
          for (let i = 1; i < 4; i++) {
            if (env.map.getLayer("traffic" + i)) {
              env.map.setLayoutProperty("traffic" + i, "visibility", "visible");
            }
          }
        } else {
          for (let i = 1; i < 4; i++) {
            if (env.map.getLayer("traffic" + i)) {
              env.map.setLayoutProperty("traffic" + i, "visibility", "none");
            }
          }
        }
      },
      togglemapfullstatus(){
        this.$store.dispatch('togglefullstatus')
      },
      toggleMapType(type){
        if (type === 'dark') {
          env.map.setStyle(globals.URL_SERVICE_ROOT + globals.URL_STYLE_RES_ROOT + configs.styleIdDark);
          this.$store.dispatch('toggleMapType', globals.MAP_TYPE_DARK);
          env.map.off("style.load");
          env.map.on("style.load", ()=> {
            this.addTraffic();
          });
        } else {
          env.map.setStyle(globals.URL_SERVICE_ROOT + globals.URL_STYLE_RES_ROOT + configs.styleIdLight);
          this.$store.dispatch('toggleMapType', globals.MAP_TYPE_LIGHT);
          env.map.off("style.load");
          env.map.on("style.load", ()=> {
            this.addTraffic();
          });
        }
      },
      getTrafficDateMark(){
        var date = new Date();
        var y = date.getFullYear();
        var M = this.get2Char(date.getMonth() + 1);
        var d = this.get2Char(date.getDate());
        var h = this.get2Char(date.getHours());
        var m = this.get2Char(date.getMinutes());

        return y + M + d + h + m;
      },
      get2Char(code) {
        var incode = code + "";
        if (incode.length === 1) {
          incode = "0" + incode;
        }
        return incode;
      }
    }
    ,
    filters: {}
  }
</script>
<style>
  #map {
    height: 100%;
    flex: 1;
  }

  .project-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 40px;
    font-weight: bold;
    z-index: 1;
    color: white;
  }

  .gl-ctrl-bottom-left {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1;
  }

  .ctrl-img {
    cursor: pointer;
    background-color: white;
    border-radius: 5px;
    display: block;
    margin: 5px 0;
  }

  .ctrl-img:hover {
    background-color: #dddddd;
  }

  #diagram-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    cursor: pointer;
  }

  .circle-bk {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 64px;
    height: 64px;
    background-color: #dcdcdc;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
    border-radius: 32px;
    z-index: 1;
    cursor: pointer;
    text-align: center;
    line-height: 64px;
    font-size: 28px;
    font-weight: bold;
  }

  .togglemapfullstatus {
    position: absolute;
    top: 300px;
    left: 1px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 1;
  }

  .flex-container {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    z-index: 1;
    background-color: white;
    position: absolute;
    right: 10px;
    bottom: 150px;
    border-radius: 3px;
  }

  .flex-item {
    align-self: center;
    border: 2px solid rgba(100, 100, 100, 0.1);
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
  }

  .flex-item:hover {
    background-color: #dddddd;
  }

  .flex-select {
    background-color: #333333;
    color: white;
  }
</style>
